<template>
  <div class="exhibition-item" :style="maskStyle" @click="toggle">
    <div class="exhibit-content-box" :style="contentStyle">
      <div class="exhibit-content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "exhibition-item",
    watch: {
      position: function (val, oldV) {
        if (val === 0 && oldV === 3) {
          val = 4;
        } else if (val === 3 && oldV === 0) {
          oldV = 4;
        }
        this.angle += (val - oldV) * 90;
      }
    },
    computed: {
      maskStyle: function () {
        return {
          transform: `rotate(${this.angle}deg)`
        }
      },
      contentStyle: function () {
        return {
          transform: `rotate(${-this.angle}deg)`
        }
      }
    },
    methods: {
      toggle() {
        if (this.position === 1) {
          this.$parent.pre();
        } else if (this.position === 3) {
          this.$parent.next();
        }
      }
    },
    data() {
      return {
        position: 2,
        angle: 0,
        angleOffset: -30,
      }
    },
    created() {
      this.angle = this.angleOffset + this.position * 90;
    }
  }
</script>

<style lang="less">
  @offset-x: 0px;
  @offset-y: 200px;
  .exhibition-item {
    position: absolute;
    bottom: @offset-y;
    right: @offset-x;
    width: 150vw;
    height: 150vw;
    transform-origin: 100% 100%;
    overflow: hidden;
    transition: all .9s;
    .exhibit-content-box {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100vw;
      height: 100vh;
      padding: @offset-y 0 0 @offset-x;
      transform-origin: 100% 100%;
      transition: all .9s;
      .exhibit-content {
        width: 100vw;
        height: 100vh;
        transition: all .9s;
      }
    }
  }
</style>
